<template>
  <div class="exitAddress">
    <navBar title="联系人" />

    <!-- 基本信息表单 -->
    <van-form validate-first @submit="formSubmit">
      <van-field
        v-model="form.realName"
        name="realName"
        label="联系人"
        required
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确联系人' }]"
      />
      <van-field
        v-model="form.phone"
        name="pattern"
        label="手机号"
        required
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确手机号' }]"
      />
      <van-field
        v-model="addr"
        name="pattern"
        label="选择地址"
        readonly
        @click="show = true"
        placeholder="请选择"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        v-model="form.detail"
        name="pattern"
        label="详细地址"
        required
        placeholder="请输入"
        :rules="[{ required: true, message: '请输入正确内容' }]"
      />
      <van-field
        v-model.number="form.postCode"
        name="pattern"
        label="收货邮政编码"
        maxlength="6"
        placeholder="请输入"
      />

      <!-- 设默认 -->
      <van-cell center title="设为默认" icon="shop-o" class="isDefault">
        <template #right-icon>
          <van-switch size="24" v-model="change" />
        </template>
      </van-cell>

      <div style="margin: 30px 16px;">
        <van-button round block type="danger" native-type="submit">提交</van-button>
        <van-button round block type="warning" >删除</van-button>
      </div>
    </van-form>

    <!-- 地址选择 -->
    <van-popup v-model="show" round position="bottom">
      <van-area title="选择地址" :area-list="areaList" @confirm="addrConfirm" @cancel="show = false" />
    </van-popup>
  </div>
</template>

<script>
import { areaList } from '@vant/area-data'; // 地址
import {
  addressDetail,
  addressEdit,
} from '@/api/user/address'

export default {
  data() {
    return {
      update: false, // 修改状态
      id: 0, // 联系人id
      areaList: areaList,
      show: false,
      form: {
        realName: '',
        detail: '',
        phone: '',
        postCode: '',
        isDefault: '',
      },
      address: {
        province: '',
        district: '',
        city: '',
      }
    }
  },
  created() {
    const { query: { id } } = this.$route
    if(!id) return 
    this.update = true
    this.id = id
    this.addressDetail()
  },
  methods: {
    // 地址详情
    async addressDetail() {
      const { data } = await addressDetail(this.id)
      if(!data) return this.$toast.fail('发生错误了~')
      this.form = data
      const addrList = Object.keys(this.address)
      Object.keys(data)?.map(item => {
        if(addrList.includes(item)) this.address[item] = data[item]
      })
    },

    // 地址选择
    addrConfirm(e) {
      const addrList = Object.keys(this.address)
      addrList.map((item, i) => this.address[item] = e[i]?.name)
      this.show = false
    },

    // 表单提交
    async formSubmit() {
      const res = await addressEdit(this.form)
      if(res.status === 200) {
        if(this.update) return this.$toast.success('修改成功~')
        this.$toast.success('新增成功~')
        this.$router.back()
      } else this.$toast.fail(res.msg)
    }
  },
  computed: {
    // 默认地址
    change: {
      get() {
        return this.form?.isDefault ? true : false
      },
      set(val) {
        this.form.isDefault = val
      },
    },
    
    // 地址
    addr() {
      return this.address.province + this.address.city + this.address.district || ''
    },
  },
  watch: {
    // 地址绑定
    address: {
      deep: true,
      immediate: true,
      handler(val) {
        this.form.address = val
      }
    },
    
    // 表单
    form: {
      deep: true,
      immediate: true,
      handler(val) {
        this.form.real_name = val.realName
        this.form.post_code = val.postCode
        this.form.is_default = val.isDefault
      }
    },
  }
}
</script>
<style lang="scss" scoped>
.exitAddress {
  text-align: left;
  .van-form {
    margin: 10px 8px;
    .isDefault {
      margin: 10px 0;
    }
    .van-button {
      margin-top: 10px;
    }
  }
}
</style>
